<div id="app">
    <header>
        <div class="title">
            <div>
                <ui-icon value="widget" style="font-size: 32px;"></ui-icon>
                <h2>Settings</h2>
            </div>
        </div>
    </header>

    <div id="content">
        <div class="settings-area">
            <div>
                <ui-label class="label-place">Check update</ui-label>
                <ui-checkbox class="input-place" :value="settings.isChecked" @click="changeChecked"></ui-checkbox>
            </div>
            <div>
                <ui-label class="label-place">Language</ui-label>
                <select v-model="settings.currentLanguage">
                    <option value="English">English</option>
                    <option value="中文">中文</option>
                <select>
            </div>
            <div>
                <ui-label class="label-place">Shortcut</ui-label>
                <input class="input-place" placeholder="Please enter the shortcut" v-model="settings.currentShortcut" @focus="clearShortcut" @blur="setShortcut" @keyup="changeShortcut($event)">
            </div>
        </div>

        <div class="btn-area">
            <ui-button style="width: 40%;" @click="applySettings">Apply</ui-button>
        </div>
    </div>
</div>
